<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>

    <script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>

    <script>
        var stompClient = null;

        function connect() {
            var socket = new SockJS('/chat');
            stompClient
                = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/messages', function(message) {
                    console.log('Message: ' + message.body);
                });
            });
        }

        function send() {
            var message = document.getElementById('message').value;
            stompClient.send("/app/chat", {}, message);
        }
    </script>
</head>
<body>
<h1>Chat Room</h1>

<form>
    <input type="text" id="message">
    <button type="button" onclick="send()">Send</button>
</form>

<button type="button" onclick="connect()">Connect</button>
</body>
</html>
